import React from 'react'
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css';

const TodoListUI = (props) => {
  return (
    <div style={{margin: '10px',width: '400px'}}>
    <div style={{display: 'flex', justifyContent: 'space-between'}}>
      <Input 
        placeholder={props.inputValue} 
        style={{width: '250px'}}
        onChange={props.changeInputValue}
        value={props.inputValue}
      ></Input>
      <Button 
        type="primary"
        onClick={props.clickBtn}
      >Primary Button</Button>
    </div>
    <div style={{marginTop: '10px'}}>
    <List
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={props.list}
        renderItem={(item, index) => (
          <List.Item onClick={() => props.itemClick(index)}>
            {item}
          </List.Item>
        )}
      />
    </div>
    <div>{props.inputValue}</div>
  </div>
  )
}

// class TodoListUI extends Component {
//   render() { 
//     return (
//       <div style={{margin: '10px',width: '400px'}}>
//       <div style={{display: 'flex', justifyContent: 'space-between'}}>
//         <Input 
//           placeholder={this.props.inputValue} 
//           style={{width: '250px'}}
//           onChange={this.props.changeInputValue}
//           value={this.props.inputValue}
//         ></Input>
//         <Button 
//           type="primary"
//           onClick={this.props.clickBtn}
//         >Primary Button</Button>
//       </div>
//       <div style={{marginTop: '10px'}}>
//       <List
//           header={<div>Header</div>}
//           footer={<div>Footer</div>}
//           bordered
//           dataSource={this.props.list}
//           renderItem={(item, index) => (
//             <List.Item onClick={() => this.props.itemClick(index)}>
//               {item}
//             </List.Item>
//           )}
//         />
//       </div>
//       <div>{this.props.inputValue}</div>
//     </div>
//     );
//   }
// }
 
export default TodoListUI;